// import React, { useState, useEffect } from "react";
// import { Modal, Form, Input, Upload, message, Select,Image } from "antd";
// import { PlusOutlined, LoadingOutlined } from "@ant-design/icons";
// import ImgCrop from "antd-img-crop";
// import { putShops } from "../../services/shops";
// import { useSelector, useDispatch } from "react-redux";
// import { setupdate } from "../../store/slices/shopsSlice";
// import { url } from "../../services";
// import { findAll } from "../../services/type";

// const { Option } = Select;

// export default function Update({ show, shop, typeShop }) {
//   let [type, setType] = useState("");
//   const [form] = Form.useForm(); //钩子函数绑定from表单 获取表单数据
//   // 有中间件 这里的student与studentSlice.js里面的student一样，那边改了这里也要改
//   const { updateVisable, shops } = useSelector((state) => state.shops);
//   const [previewImage, setPreviewImage] = useState('')// 图片
//   const [shopType, setShopType] = useState([]);
//   const children = [];
//   for (let i = 0; i < shopType.length; i++) {
//     children.push(
//       <Option key={shopType[i]._id} value={shopType[i]._id}>
//         {shopType[i].typeName}
//       </Option>
//     );
//   }
//   let showModal = async () => {
//     let data = await findAll();
//     console.log(data.data, "type");
//     setShopType(data.data);
//   };
//   useEffect(() => {
//     showModal();
//   }, [shopType.length]);

//   // console.log(shops, "aaaa");
//   form.setFieldsValue({ ...shops, typeName: shops.types._id }); //获取表单的值
//   //   不加副作用代码会一直执行{...shops,typeName:shops.typeName._id}
//   useEffect(() => {
//     // 把内容渲染到对话框
//     let array = shops.shopImg.map((item, i) => {
//       return {
//         uid: "-1",
//         name: "image.png",
//         status: "done",
//         url: url + "/images/" + item,
//       };
//     });

//     setFileList(array); //得到后端的图片
//   }, [shops._id]);
//   let dispatch = useDispatch();
//   //   console.log(student);

//   // 修改图片的格式
//   const getBase64 = (file) =>
//     new Promise((resolve, reject) => {
//       const reader = new FileReader();
//       reader.readAsDataURL(file);

//       reader.onload = () => resolve(reader.result);

//       reader.onerror = (error) => reject(error);
//     });
//   //  点击确认按钮
//   const handleOk = async () => {
//     let values = form.getFieldValue(); //获取对应字段（点击的内容）的值
//     console.log(values, "abc");
//     await putShops({
//       ...values,
//       types: values.typeName.value,
//       isStatus: values.isStatus.label,
//       shopImg: values.shopImg,
//     });
//     show();
//     dispatch(setupdate(false));
//   };

//   const handleCancel = () => {
//     dispatch(setupdate(false));
//   };

//   // 是否上架
//   const handleUp = (e) => {
//     console.log(e, "e");
//     // console.log(`selected ${value}`);
//   };
//   //
//   const handleType = async () => {};
//   // 上传
//   const [fileList, setFileList] = useState([]);
//   //
//   const onChange = (file) => {
//     console.log(file, "file");
//     let bb=[];
//     if (file.fileList.length > 0) {
//       file.fileList.map(async (item) => {
//         if (!item.url) {
//           let aaa = await getBase64(item.originFileObj);
//           console.log(aaa, "aaa"); 
//         setPreviewImage(aaa);

//           bb.push(aaa);
        
//         }
//       });
//       if(bb.lenth > 0) {
//         setFileList(bb);
//       }
      
//     }
//     //   info.fileList.map(item=>{
//     //     // if(item.status==='done'){
//     //       getBase64(item.originFileObj, (url) => {
//     //         // setLoading(false);
//     //         // setImageUrl(url);
//     //         console.log(url,';y]url');
//     //         setFileList(url);
//     //     });
//     //     // }
//     //   });
//     //   // console.log(fileList,'fileList',newFileList,'newFileList');
//     //   // setFileList(info.fileList.newFileList);
//   };

//   // const onChange = ({ fileList: newFileList }) => {
//   //   console.log(newFileList,'newFileList');
//   //   setFileList(newFileList);
//   // }
//   // const handlePreview = async (file) => {
//   //   if (!file.url && !file.preview) {
//   //     file.preview = await getBase64(file.originFileObj);
//   //   }

//   //   setPreviewImage(file.url || file.preview);
//   //   setPreviewVisible(true);
//   //   setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
//   // };
//   const onPreview = async (file) => {
//     let src = file.url;

//     if (!src) {
//       src = await new Promise((resolve) => {
//         const reader = new FileReader();
//         reader.readAsDataURL(file.originFileObj);
//         reader.onload = () => resolve(reader.result);
//       });
//     }
//     const image = new Image();
//     image.src = src;
//     const imgWindow = window.open(src);
//     imgWindow?.document.write(image.outerHTML);
//   };
//   const onRemove = (value) => {
//     console.log(value, "删除");
//   };

//   return (
//     <>
//       <Modal
//         title="修改商品"
//         visible={updateVisable}
//         onOk={handleOk}
//         onCancel={handleCancel}
//         okText="确认"
//         cancelText="取消"
//       >
//         <Form
//           name="updateForm"
//           labelCol={{ span: 4 }}
//           wrapperCol={{ span: 18 }}
//           form={form}
//         >
//           <Form.Item label="商品名" name="name">
//             <Input />
//           </Form.Item>

//           <Form.Item label="分类名" name="typeName">
//             <Select labelInValue onChange={handleType}>
//               {shopType.map((item, i) => (
//                 <Option key={item} value={item._id}>
//                   {item.typeName}
//                 </Option>
//               ))}
//             </Select>
//           </Form.Item>

//           <Form.Item name="price" label="价格">
//             <Input />
//           </Form.Item>
//           <Form.Item name="total" label="数量">
//             <Input />
//           </Form.Item>

//           <Form.Item name="isStatus" label="是否上架" onChange={handleUp}>
//             <Select labelInValue defaultValue={"hit"} style={{ width: 120 }}>
//               <Option value="hit">已上架</Option>
//               <Option value="down">已下架</Option>
//             </Select>
//           </Form.Item>
//           <Form.Item label="商品图片" name="shopImg">
//             <Upload
//               name="file"
//               action={url + "/upload"}
//               listType="picture-card"
//               fileList={fileList}
//               onChange={onChange}
//               // onPreview={onPreview}
//               // onPreview={handlePreview}
//               onRemove={onRemove}
//             >
//               {fileList.length < 7 && "+ Upload"}
             
//             </Upload>
//             <Image
//                 alt="example"
//                 style={{
//                   width: '100%',
//                 }}
//                 src={previewImage}
//               />
//           </Form.Item>
//         </Form>
//       </Modal>
//     </>
//   );
// }
